// main.js (修正后的最佳实践)

import { createSSRApp } from 'vue'
import App from './App.vue'

import pinia from '@/store' // 导入的是已经创建并安装好插件的 pinia 实例
import i18n from '@/i18n'
import { setupPermission } from '@/permission.js'
import { setTabBarText } from '@/utils/setTabBarText'

export function createApp() {
  const app = createSSRApp(App)

  // 先挂载 Pinia，让状态管理系统就绪
  app.use(pinia)

  // 然后设置路由守卫，此时守卫内部已经可以安全地访问 Pinia
  setupPermission()

  // 最后挂载 i18n
  app.use(i18n)

  // 监听语言切换，动态更新tabBar
  app.config.globalProperties.$watchLocale = (cb) => {
    // vue-i18n 4.x 没有全局事件，这里用定时器简单监听
    let last = i18n.global.locale.value
    setInterval(() => {
      if (i18n.global.locale.value !== last) {
        last = i18n.global.locale.value
        cb && cb(last)
      }
    }, 500)
  }
  app.config.globalProperties.$watchLocale(() => {
    setTabBarText()
  })

  return {
    app
  }
}
